<template>
  <div v-if="data && data.length === 0" style="color: #666;">
    审核人为空，审核将自动通过。
  </div>
  <div v-else class="wk-approval-container">
    <div
      v-for="(flow, index) in data"
      :key="index"
      class="wk-approval-item d-flex flex-column"
    >
      <div class="d-flex wk-approval-item__header">
        <div class="d-flex justify-content-center align-items-center cell">
          <i class="el-icon-s-check center_img"></i>
        </div>
        <div class="ml-20 d-flex">
          <span class="size-14 color-02 font-bold">{{ flow.name }}</span
          ><span class="size-12 color-02 examine_type" :class="getExamineTypeName(flow.examineType)=='指定角色'?'bg-green':''">{{
            getExamineTypeName(flow.examineType)
          }}</span>
        </div>
      </div>
      <div class="wk-approval-item__body">
        <template v-if="flow.examineType === 4">
          <flexbox class="user-wrap" wrap="wrap">
            <div v-for="(item, index) in flow.values" :key="index" class="user">
              <xr-avatar :name="item.realname" :size="40" :src="item.img" />
              <div class="user__name">{{ item.realname }}</div>
              <div class="user__step">{{ (index + 1) | step }}</div>
              <i
                class="user__delete el-icon-close"
                @click="deleteUserClick(index, flow.values)"
              />
            </div>
            <div
              v-if="
                (flow.chooseType === 1 && flow.values.length === 0) ||
                  (flow.chooseType === 2 && flow.values.length < 20)
              "
              class="user"
            >
              <el-button
                class="user__img"
                icon="el-icon-plus"
                style="margin-bottom: 2px;"
                circle
                @click="selectUserClick(flow)"
              />
              <div class="user__name">{{ getSelfSelectName(flow) }}</div>
              <div class="user__step">
                {{ (flow.values.length + 1) | step }}
              </div>
            </div>
          </flexbox>
        </template>
        <template v-else-if="flow.examineType === 1 || flow.examineType === 3">
          <flexbox v-if="flow.userList.length" class="user-wrap" wrap="wrap">
            <div class="user">
              <p class="user__step text-left"
                >审批人：{{ flow.userList | contentFilters }}</p
              >
              <!-- <xr-avatar :name="item.realname" :size="40" :src="item.img" /> -->
              <!-- <div class="user__name">{{ item.realname }}</div>
              <div class="user__step">{{ (index + 1) | step }}</div> -->
            </div>
          </flexbox>
          <!-- <flexbox v-else class="user-wrap" wrap="wrap">
            <el-popover
              :disabled="flow.userList.length == 0"
              :content="flow.userList | contentFilters"
              placement="bottom"
              trigger="hover"
            >
              <div slot="reference" class="user">
                <img class="user__img" src="@/assets/img/examine_head.png" />
                <div class="user__name">
                  {{ flow.userList.length }}人{{ getWayTypeName(flow.type) }}
                </div>
                <div class="user__step">第一级</div>
              </div>
            </el-popover>
          </flexbox> -->
        </template>
        <template v-else-if="flow.examineType === 2 || flow.examineType === 5">
          <flexbox
            v-if="flow.userList.length > 0"
            class="user-wrap"
            wrap="wrap"
          >
            <div
              v-for="(item, index) in flow.userList"
              :key="index"
              class="user"
            >
              <xr-avatar :name="item.realname" :size="40" :src="item.img" />
              <div class="user__name">{{ item.realname }}</div>
              <div class="user__step">{{ (index + 1) | step }}</div>
            </div>
          </flexbox>
          <flexbox v-else class="user-wrap" wrap="wrap">
            <div class="user">
              <img class="user__img" src="@/assets/img/examine_head.png" />
              <div class="user__name">XX</div>
              <div class="user__step">第一级</div>
            </div>
          </flexbox>
        </template>
      </div>
    </div>

    <wk-dep-user-view-dialog
      v-if="depUserViewDialogShow"
      :props="{
        canSelectDep: false,
        userOptions: userOptions,
        searchParams: { status: 1 },
        request: userRequest,
        radio: true
      }"
      :user-value="userList"
      :visible.sync="depUserViewDialogShow"
      @change="selectUserChange"
    />
  </div>
</template>

<script>
import { adminUserQueryDeptUserByExamineAPI } from "@/api/admin/user";

import WkUserSelect from "@/components/NewCom/WkUserSelect";
import WkDepUserViewDialog from "@/components/NewCom/WkUserSelect/DepDialog";

import {
  examineTypeObj,
  wayTypeObj
} from "@/components/ApprovalFlow/nodeModel";
import Nzhcn from "nzh/cn";

export default {
  // 审批流的应用参数
  name: "WkApprovalFlowApply",

  components: {
    WkUserSelect,
    WkDepUserViewDialog
  },

  filters: {
    step: function(index) {
      return "第" + Nzhcn.encodeS(index) + "级";
    },

    contentFilters: function(array) {
      return array.map(item => item.realname).join("、");
    }
  },

  props: {
    data: Array
  },

  data() {
    return {
      userList: [],
      userOptions: [],
      editItem: null,
      depUserViewDialogShow: false
    };
  },

  computed: {
    userRequest() {
      return adminUserQueryDeptUserByExamineAPI;
    }
  },

  watch: {},

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 获取审批类型名称
     */
    getExamineTypeName(examineType) {
      return examineTypeObj[examineType];
    },

    /**
     * 获取或并方式
     */
    getWayTypeName(type) {
      return wayTypeObj[type];
    },

    /**
     * 选择员工
     */
    selectUserClick(item) {
      this.userOptions = item.rangeType === 1 ? null : item.userList;
      this.editItem = item;
      this.depUserViewDialogShow = true;
    },

    /**
     * 选择员工change
     */
    selectUserChange(users) {
      if (users.length) {
        const userIds = this.editItem.values.map(item => item.userId);
        if (!userIds.includes(users[0].userId)) {
          this.editItem.values.push(users[0]);
        }
      }
    },

    /**
     * 获取自选名称
     */
    getSelfSelectName(data) {
      if (data.chooseType === 1) {
        return "选择员工";
      } else if (data.chooseType === 2) {
        return (
          {
            2: "多人会签",
            3: "多人或签"
          }[data.type] || "选择员工"
        );
      }
    },

    /**
     * 删除user
     */
    deleteUserClick(index, list) {
      list.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.wk-approval-container .wk-approval-item:last-child{
  .user{
    border: none !important;
  }
}
.wk-approval-item {
  .examine_type{
    height: 20px;
    border-radius: 10px;
    line-height: 20px;
    padding: 0 8px;
    margin-left: 16px;
    background: #FF6A51;
    color: #FFFFFF;
    font-size: 10px;
    margin-top: -4px;

  }
  .bg-green{
    background: #08C051 !important;
  }
  &__header {
    .cell {
      width: 30px;
      height: 30px;
      background: #935af6;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
    }
  }
  .center_img{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    z-index: 10;
    background: #935af6;
    border-radius: 50%;
  }
  &__body {
    margin-top: -12px;

    .user-wrap {
      text-align: center;
      .user {
        padding: 5px 0 15px 36px;
        margin-left: 15px;
        position: relative;
        border-left: 1px solid #dee3ff;
        line-height:18px ;
        .user__name {
          color: #777777;
          font-size: 12px;
          padding: 2px 0;
          transform: scale(0.8, 0.8);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .user__step {
          color: #999;
          font-size: 12px;
        }

        &__delete {
          position: absolute;
          background-color: #b2b2b2;
          color: white;
          font-size: 12px;
          border-radius: 6px;
          cursor: pointer;
          top: 12px;
          right: 25px;
          visibility: hidden;
          &:hover {
            background-color: $xr-color-primary;
          }
        }

        &:hover {
          .user__delete {
            visibility: visible;
          }
        }
      }
    }
  }
}
</style>
